<!--
 * 日志管理--操作日志
 * @author: hexiaozhen
 * @since: 2023-09-27
 * operlog.vue
-->
<template>
  <div class="main-content">
    <!-- 搜索 -->
    <TableForm
      ref="formAndTableRef"
      :formItems="formItems"
      :formData="formData"
      :girdOption="girdOption"
      class="tableForm"
      @getTableList="getTableList"
      @selectionChange="selectionChange"
      @handleBtnClick="handleBtnClick"
    >
      <!-- 自定义操作按钮 -->
      <template #tableOptate="{ record }">
        <a-button
          v-for="clickItem in tableOperateList"
          :key="clickItem.text"
          type="text"
          class="operate-item"
          @click="handleBtnClick(clickItem.eventName, record)"
        >
          {{ clickItem.text }}
        </a-button>
      </template>
      <!-- 列插槽 -->
      <template #businessType="{ record }">{{ typeObj[record.businessType] }}</template>
      <template #status="{ record }">
        {{ record.status === 0 ? '成功' : '失败' }}
      </template>
      <template #operTime="{ record }">
        {{ record.operTime.slice(0, 10) }}
      </template>
    </TableForm>
    <OperlogDetail
      v-if="visible"
      v-model:visible="visible"
      :rowData="rowData"
      @submit="getTableList()"
      :typeOptions="typeOptions"
      :statusOptions="statusOptions"
    ></OperlogDetail>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import TableForm from '@/components/tableForm/index.vue'
import OperlogDetail from './components/operlogDetail.vue' // 详细
import system from '@/api/modules/system'
import { Modal, Message } from '@arco-design/web-vue'

const formData = reactive({ title: '', operName: '', businessType: '', status: '', dateRange: ['', ''] })
const formAndTableRef = ref()
// 获取字典数据
const typeOptions = ref([])
const statusOptions = ref([])
// 表单配置
const formItems = reactive([
  { name: 'title', label: '系统模块', type: 'a-input' },
  { name: 'operName', label: '操作人员', type: 'a-input' },
  { name: 'businessType', label: '操作类型', type: 'a-select', options: typeOptions },
  { name: 'status', label: '操作状态', type: 'a-select', options: statusOptions },
  { name: 'dateRange', label: '操作时间', type: 'a-range-picker' },
])

const girdOption = reactive({
  btnList: [
    { name: '删除', status: 'danger', eventName: 'delMultiple', type: 'icon-shanchu' },
    { name: '清空', eventName: 'clean', type: 'icon-qingkong' },
    { name: '导出', eventName: 'export', type: 'icon-daochu' },
  ],
  columns: [
    { title: '日志编号', dataIndex: 'operId', width: 100 },
    { title: '系统模块', dataIndex: 'title', width: 200 },
    { title: '操作类型', slotName: 'businessType', width: 100 },
    { title: '请求方式', dataIndex: 'requestMethod', width: 100 },
    { title: '操作人员', dataIndex: 'operName', width: 100 },
    { title: '主机', dataIndex: 'operIp', width: 150 },
    { title: '操作状态', slotName: 'status', width: 100 },
    { title: '操作日期', slotName: 'operTime', width: 150 },
    { title: '操作', slotName: 'optional', width: 80, fixed: 'right' },
  ],
  loading: false,
  tableSlotList: ['operTime', 'businessType', 'status'], //表格插槽
  tableId: 'operId', //表格唯一标识符类似于id
  rowSelection: true, // 多选
})

// 表格操作插槽
const tableOperateList = reactive([{ text: '详细', eventName: 'detail' }])
let visible = ref(false) // 新增编辑弹窗
let rowData = reactive({ type: 'add' }) // 弹窗数据

let selectionList = [] // 多选数据
const handleBtnClick = (type, row) => {
  switch (type) {
    case 'detail': {
      // 详细
      rowData = { ...row }
      visible.value = true
      break
    }
    case 'clean': {
      // 清空
      Modal.open({
        title: '警告',
        content: `是否确认清空所有操作日志数据项?`,
        draggable: true,
        onOk: () => {
          clean()
        },
      })
      break
    }
    case 'delMultiple': {
      //批量删除
      if (!selectionList.length) {
        return Message.warning('请先选择表格数据！')
      }
      Modal.open({
        title: '警告',
        content: `是否确认批量删除已选数据项？`,
        draggable: true,
        onOk: () => {
          delOperlog(selectionList.join(','))
        },
      })
      break
    }
    case 'export': {
      // 导出
      break
    }
  }
}
const clean = () => {
  system.cleanOperlog().then((res) => {
    getTableList()
    Message.success(res.msg)
  })
}
const delOperlog = (id) => {
  system.delOperlog(id).then((res) => {
    getTableList()
    Message.success(res.msg)
  })
}
// 获取表格数据
let requestParam = {}
const getTableList = (pageConfig) => {
  if (pageConfig) {
    requestParam.size = pageConfig.pageSize
    requestParam.current = pageConfig.current
  }
  let param = {
    ...formData,
  }
  param.operTimeStart = param.dateRange[0].length ? param.dateRange[0] + ' 00:00:00' : ''
  param.operTimeEnd = param.dateRange[1].length ? param.dateRange[1] + ' 23:59:59' : ''
  delete param.dateRange
  girdOption.loading = true
  system
    .getOperlog(param, requestParam)
    .then((res) => {
      formAndTableRef.value.setTableData(res.data.records, Number(res.data.total))
      girdOption.loading = false
    })
    .catch(() => {
      girdOption.loading = false
    })
}
// 多选
const selectionChange = (list) => {
  selectionList = list
}
// 数据字典
const typeObj = ref({})
const getOption = () => {
  const param = { dictTypes: 'sys_oper_type,sys_common_status' }
  system.getDicts(param).then((res) => {
    // 操作类型
    typeOptions.value = res.data.sys_oper_type.map((it) => ({
      label: it.dictLabel,
      value: it.dictValue,
    }))
    res.data.sys_oper_type.map((it) => (typeObj.value[it.dictValue] = it.dictLabel))
    // 操作状态
    statusOptions.value = res.data.sys_common_status.map((it) => ({
      label: it.dictLabel,
      value: it.dictValue,
    }))
  })
}
onMounted(() => {
  getOption()
  getTableList({ pageSize: 10, current: 1 })
})
</script>
